<template>
  <div class="wrap">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主题内容 -->
    <el-card class="box-card">
      <!-- 搜索框 -->
      <el-row :gutter="20" style="margin-bottom: 15px">
        <el-col :span="8">
          <el-input
            v-model.trim="search.query"
            placeholder="请输入内容"
            clearable
            maxlength="10"
            @clear="handleClear"
            @keyup.enter.native="handleSearch"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handleSearch"
            />
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-button
            type="primary"
            style="margin-left: 15px"
            @click="addPage"
          >添加商品</el-button>
        </el-col>
      </el-row>
      <!-- 表格区 -->
      <el-table
        :data="goodsList"
        border
        stripe
        max-height="600"
        style="width: 100%"
      >
        <el-table-column
          width="50"
          label="序号"
          align="center"
        >
          <template slot-scope="scope">
            {{ (search.pagenum - 1)*search.pagesize +scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="goods_name"
          label="商品名称"
        />
        <el-table-column
          prop="goods_price"
          label="商品价格(元)"
          width="120"
        />
        <el-table-column
          prop="goods_weight"
          width="120"
          label="商品重量(kg)"
        />
        <el-table-column
          prop="add_time"
          width="120"
          label="创建时间"
        >
          <template slot-scope="scope">
            {{ scope.row.add_time |setTime }}
          </template>
        </el-table-column>
        <el-table-column
          prop="add_time"
          width="180"
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)" />
            <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="search.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="search.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <!-- 编辑商品的弹出框 -->
      <el-dialog title="编辑商品" :visible.sync="editFormVisible" @close="editCancle()">
        <el-form ref="editRef" :model="editForm" :rules="editRules" label-width="80px">
          <el-form-item label="商品名称" prop="goods_name">
            <el-input v-model="editForm.goods_name" />
          </el-form-item>
          <el-form-item label="价格" prop="goods_price">
            <el-input v-model="editForm.goods_price" />
          </el-form-item>
          <el-form-item label="数量" prop="goods_number">
            <el-input v-model="editForm.goods_number" />
          </el-form-item>
          <el-form-item label="重量" prop="goods_weight">
            <el-input v-model="editForm.goods_weight" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editCancle">取 消</el-button>
          <el-button type="primary" @click="editComfirm">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import { getGoodApi, deletGoods, getGoodsApi, editCommitGoodsApi } from '@/api/list';
export default {
  name: 'List',
  components: { },
  data() {
    return {
      // 编辑表单的是否可见
      editFormVisible: false,
      // 编辑商品的form
      editForm: {
        goods_name: '',
        goods_number: '',
        goods_price: '',
        goods_weight: ''
      },
      // 编辑商品
      editRules: {
        goods_name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        goods_price: [
          { required: true, message: '请输入价格名称', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在1 到 5 个字符', trigger: 'blur' }
        ],
        goods_weight: [
          { required: true, message: '请输入重量名称', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1到 5 个字符', trigger: 'blur' }
        ],
        goods_number: [
          { required: true, message: '请输入数量名称', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ]

      },
      // 搜索框
      search: {
        query: '', // 查询参数
        pagenum: 1, // 当前页码
        pagesize: 5// 每页显示条数
      },
      dialogVisible: false,
      goodsList: [], // 商品列表数据
      total: 0// 总条数
    };
  },
  mounted() {
    this.getGoodList();
  },
  methods: {
    // 取消 编辑
    editCancle() {
      this.editFormVisible = false;
      this.$refs.editRef.clearValidate();
    },
    // 确定 编辑
    editComfirm() {
      this.$refs.editRef.validate((valid) => {
        if (!valid) return false;
        editCommitGoodsApi(this.editForm.id, this.editForm).then((res) => {
          const { meta } = res.data;
          if (meta.status !== 200) return this.$message.error('编辑失败');
          this.$message.success('编辑成功');
          this.getGoodList();
          this.editFormVisible = false;
        });
      });
    },
    // 添加商品
    addPage() {
      this.$router.push('/add');
    },
    // 删除商品
    handleDelete(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletGoods(row.goods_id).then((res) => {
          const { status, msg } = res.data.meta;
          if (status !== 200) return this.$message.error(msg);
          this.getGoodList();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //   编辑商品
    handleEdit(row) {
      getGoodsApi(row.goods_id).then((res) => {
        const { meta, data } = res.data;
        if (meta.status !== 200) return this.$message.error(meta.msg);
        data.goods_number = data.goods_number.toString();
        data.goods_price = data.goods_price.toString();
        data.goods_weight = data.goods_weight.toString();
        const { goods_id: id, goods_name, goods_number, goods_price, goods_weight, goods_cat } = data;
        this.editForm = { id, goods_name, goods_number, goods_price, goods_weight, goods_cat };
        this.editFormVisible = true;
      });
    },
    //   监听每页条数
    handleSizeChange(val) {
      this.search.pagesize = val;
      this.getGoodList();
    },
    //   监听当前页
    handleCurrentChange(val) {
      this.search.pagenum = val;
      this.getGoodList();
    },
    //   获取商品列表数据
    getGoodList() {
      getGoodApi(this.search).then((res) => {
        const { data, meta } = res.data;
        if (meta.status !== 200) return this.$message.error(meta.msg);
        const { goods, total } = data;
        this.goodsList = goods;
        this.total = total;
      }).catch((err) => {
        console.log(err);
      });
    },
    // 搜索框清空时触发
    handleClear() {
      this.getGoodList();
    },
    // 搜索
    handleSearch() {
      this.getGoodList();
    }
  }
};
</script>
<style scoped lang='scss'>
.box-card {
  width: 100%;
  margin-top: 15px;
}
</style>
